<template>
    <li class="DirectoryItem">
        <div class="item" @click="toggleChildren(item)" :style="{ marginLeft: `${level * 20}px` }">
            <span class="indent">
                <template v-if="item.children">
                    <el-icon v-if="item.showChildren">
                        <ArrowRight />
                    </el-icon>
                    <el-icon v-else><ArrowDown /></el-icon>
                </template>
            </span>
            <span class="name">{{ item.name }}</span>
        </div>
        <ul v-if="item.children && item.showChildren" class="directory">
            <directory-item v-for="(child, index) in item.children" :key="index" :item="child" :level="level + 1" />
        </ul>
    </li>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
    item: {
        type: Object,
        required: true
    },
    level: {
        type: Number,
        default: 0
    }
});

const showChildren = ref(false);

const toggleChildren = (item) => {
    // showChildren.value = !showChildren.value;
    console.log(item.name);
    item.showChildren = !item.showChildren;
};
</script>

<style scoped lang="less">
.DirectoryItem {
    list-style: none;

    .item {
        display: flex;
        align-items: center;
    }
}

.indent {
    display: inline-block;
    cursor: pointer;
    padding-right: 0.5em;
    width: 1.2em;
    /* width: 20px;
    height: 1em; */
}

.directory {
    list-style-type: none;
    padding-left: 0;

    .name {
        display: inline-block;
        padding: 1em 0;
        cursor: pointer;
    }
}
</style>